import React, {Component} from 'react'
import {
    View,
    StyleSheet,
    Text
} from 'react-native'
import {deviceWidth} from "src/util"

const data = [
    {
        index: 1,
        title: '身份验证'
    },
    // {
    //     index: 2,
    //     title: '人像验证'
    // },
    {
        index: 2,
        title: '储蓄卡验证'
    },
    {
        index: 3,
        title: '完成'
    }]

export default class IdentityProgress extends Component<{}> {
    render() {
        var step = this.props.step
        return (
            <View style={[styles.container, this.props.style]}>
                {data.map((item, index) => {
                    return <RenderItem key={index} step={step} item={item} index={index + 1}/>
                })}
            </View>
        )
    }
}

// 中间的小按钮
function RenderItem (props) {
    return (
        <View style={styles.itemButton}>
            <View style={{flex: 1}}/>
            <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                <View style={{backgroundColor: props.index !== 1 ? 'rgba(255, 255, 255, 0.54)' : 'transparent', flex: 1, height: 2}}/>
                <View style={styles.pointStyle}>
                    <Text  style={{ fontSize: 9, lineHeight: 11,  color: '#ff2121', fontFamily: 'PingFang SC'}}>{props.item.index}</Text>
                </View>
                <View style={{backgroundColor: props.index !== data.length ? 'rgba(255, 255, 255, 0.54)' : 'transparent', flex: 1, height: 2}}/>
            </View>
            <Text style={{
                fontSize: 12,
                lineHeight: 17,
                color: props.index !== props.step ? 'rgba(255, 255, 255, 0.49)' : 'white',
                fontFamily: 'PingFang SC',
                marginTop: 6 }}>{props.item.title}</Text>
            <View style={[styles.arrow, {borderTopColor: props.index !== props.step ? '#ff2121' : 'white'}]}>
            </View>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flexWrap: 'wrap',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        height: 98,
        paddingLeft: 16,
        backgroundColor: '#ff2121'
    },
    itemButton: {
        alignItems: 'center',
        width: (deviceWidth - 32) / 3,
        height: 98
    },
    pointStyle: {
        width: 14,
        height: 14,
        borderRadius: 7,
        backgroundColor: 'white',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    },
    arrow:{
        marginTop: 6,
        marginBottom: 13,
        width:0,
        height:0,
        borderStyle:'solid',
        borderWidth:6,
        borderLeftColor:'#ff2121',//右箭头颜色
        borderBottomColor:'#ff2121',//上箭头颜色
        borderRightColor:'#ff2121'//左箭头颜色
    }
})